<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>modbus主动轮询</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css}">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<!--    <legend><td th:text="${address} id="address"></td>轮询配置<div></div></legend>-->
</fieldset>

<div class="layuimini-main">
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" id="btnadd" lay-event="add"> 添加 </button>
        </div>
    </script>
    <table class="layui-hide" id="test" lay-filter="currentTableFilter"></table>
    <script type="text/html" id="currentTableBar">
        <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" id="btndele" lay-event="delete">删除</a>
    </script>
</div>
<fieldset class="table-search-fieldset" >
    <form class="layui-form">
        <div class="layui-form-item">
            <div class="layui-input-block">
                定时上传： <input style=" width: 120px;"  name="timing">s      变化上传  <input  style=" width: 120px;"  name="change">   上传类型  <input  style=" width: 120px;"  name="uptype">
                超时<input  style=" width: 120px;" name="overtime">s  轮询查询 <input style=" width: 120px;" name="poll"> s 前缀<input  style=" width: 250px;" name="prefix">
            </div>
        </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                指令延时<input style=" width: 120px;" name="orderDelay">ms  寄存器开始映射地址 <input style=" width: 50px;" name="shadowingAddr">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <!--                <button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
            </div>
        </div>
    </form>
</fieldset>
</body>

<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/jquery.min.js}" charset="utf-8"></script>
<script>
    layui.use(['form','table','util'], function(){
        var form = layui.form;
        var  table=layui.table;
        var  util=layui.util;
        // var $=layui.jquery;
        var AddData=[];
        table.render({
            elem: '#test',
            toolbar: '#toolbarDemo',
            data:AddData,
            editTrigger: 'dblclick', // 触发编辑的事件类型（默认 click ）。 v2.7.0 新增，之前版本固定为单击触发
            cols: [
                [
                    // {field: 'id', title: 'ID', width: 120, hide: true,},
                    {field: 'location', title: '地址',width: 120,edit:"text"},
                    {field: 'func', title: '功能码',width: 120,edit:"text"},
                    {field: 'sr', title: '开始寄存器', width: 120,edit:"text"},
                    {field: 'srnum', title: '寄存器数量', width: 120,edit:"text"},
                    {field: 'datatype', title: '数据类型', width: 120,edit:"text"},
                    {field: 'jsonname', title: 'Json名', width:120,edit:"text"},
                    {field: 'oob', title: '紧急数据', width:120,edit:"text"},
                    {field: 'k', title: 'k', width: 120,edit:"text"},
                    {field: 'b', title: 'b',  width: 120,edit:"text"},
                    {field: 'cache', title: '缓存地址', width: 120,edit:"text"},
                    {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
                ]
            ]
        })
        /**
         * 获取列表数据
         */
        function getDataList(tableId) {
            if (table.cache[tableId]) {
                return table.cache[tableId];
            }
            return [];
        }
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') {  // 监听添加操作
                var dataList = getDataList("test");//table的id
                // var data1={ "id":  dataList.length+1, "location": "","func": "","sr": "","srnum": "","datatype":" ","jsonname": "","oob": "","k": "","b": "","cache": ""
                // };
                var data1={ "location": "","func": "","sr": "","srnum": "","datatype":" ","jsonname": "","oob": "","k": "","b": "","cache": ""
                };
                var newDataList = dataList.concat(data1);
                table.reload('test',{
                    data : newDataList
                });
            }

        });
        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'delete') {
                var oldData =  table.cache["test"];
                oldData.splice(obj.tr.data('index'),1);

                layer.msg("删除成功",{time: 10},function(){
                    table.reload('test',{data : oldData});
                });
            }
        });

        // 单元格编辑后的事件
        table.on('edit(text)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改值为：'+ util.escape(value));
        });
        //监听提交
        form.on('submit(formDemo)', function(data){

            // var index = top.layer.msg('数据提交中，请稍候',{icon: 16,time:false,shade:0.8});
            var dataList = getDataList("test");//table的id
            //将复选框选中的内容用，拼接成字符串
            data.field.data = dataList;
             var address=[[${address}]];
            alert("ok")
            // $.post("/sendmsg1/"+address,{"content":JSON.stringify(data.field)},function(res) {
            //
            // })
            alert(JSON.stringify(data.field));
            return false;//false表示不重新加载页面，true表示重新加载
        });
    });
</script>
</html>






